<template>
	<view class="content">
		<view v-for="(item ,index) in list" :key="index"
			style="background-color: #fff; margin: 20upx 0; padding: 20upx;border-radius: 12upx;">-	
			<view class="school" @click="navSchool(item.merchants.id)">
				<image src="../../../static/school.png" mode=""></image> {{item.merchants.user}}
			</view>
			<view class="activityItem" @click="navCluster(item.courses.id)">
				<view class="activityImg">
					<image :src="item.courses.pic_s" mode="aspectFill">
					</image>
				</view>
				<view class="activityText">
					<view class="name">
						{{item.courses.title}}
					</view>
					<view class="label">
						<view class="">
							{{item.courses.school_title}}
						</view>
						<view class="">
							{{item.courses.applicable}}
						</view>
						<view class="">
							{{item.courses.pattern}}
						</view>
					</view>
				</view>
			</view>
			<view class="">
				我的评价:<u-rate v-model="item.scoring" disabled></u-rate>
			</view>
			<view class="type">
				<view class="typeItem" v-for="(item ,index) in item.comm_list">
					{{item}}
				</view>
			</view>
			<u-read-more show-height="200" :shadowStyle="shadowStyle" close-text="全文" toggle text-indent="0">
				<text style="font-size: 26upx;">{{item.content}}</text>
				<!-- <rich-text :nodes="item.content"></rich-text> -->
			</u-read-more>
			<view class="img">
				<view class="imgItem" v-for="(itemImg ,Xindex) in item.pic_set" :key="Xindex"
					@click="$util.enlargement(item.pic_set)">
					<image :src="itemImg" mode="aspectFill"
						:style="{height:item.user_type=='merchants'?'200rpx':'175rpx'}"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				shadowStyle: {
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					paddingTop: "100rpx",
					marginTop: "-100rpx",
					textAlign: "center"
				},
			}
		},
		onLoad(e) {
			this.order_id=e.order_id
			this.newData()
		},
		methods: {
			newData() {
				this.$myRuquest('home/user/order_comm_list').then(res => {
					if (res.code == 400) {
						if(this.order_id){
							res.data.forEach(item=>{
								if(item.order_id==this.order_id)return this.list.push(item)
							})
						}else{
							this.list = res.data
						}	
					}
				})
			},
			navSchool(id){
				uni.navigateTo({
					url: `/pages/organizationDetails/organizationDetails?id=${id}`
				});
			},
			navCluster(id) {
				uni.navigateTo({
					url: `/pages/organizationDetails/clusterHelp/clusterHelp?id=${id}`
				});
			}
		},

	}
</script>

<style lang="less" scoped>
	.twoCode {
		width: 100vw;
		height: 100vh;
	}

	.content {
		padding: 20upx;
		background-color: rgb(247,247,247);
		min-height: 100vh;
	}
	.school {
		display: flex;
		margin-bottom: 20upx;
		image {
			width: 40upx;
			height: 40upx;
			margin: 0 10upx;
			background-image: none;
		}
	}
	.type {
		display: flex;
		flex-wrap: wrap;

		.typeItem {
			margin: 10upx;
			padding: 5upx 10upx;
			border-radius: 10upx;
			background-color: rgba(240, 105, 18, .05);
			color: rgb(240, 105, 18);
		}
	}

	.activityItem {
		display: flex;
		position: relative;
		margin-bottom: 20upx;

		.activityImg {
			width: 120upx;
			height: 120upx;
			border-radius: 12upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.activityText {
			margin: 0 20upx;
			width: calc(100% - 160upx);

			.name {
				font-weight: 900;
			}

			.label {
				display: flex;
				font-size: 20upx;
				margin: 14upx 0;
				color: #767676;

				view {
					padding: 0 20upx;
				}

				view:nth-child(1) {
					padding-left: 0;
				}

				view:nth-child(1),
				view:nth-child(2) {
					border-right: 1upx solid #a8a8a8;

				}


			}

			.money {
				color: rgb(248, 95, 0);
				font-weight: 900;
			}
		}
	}

	.activityBtn {
		position: absolute;
		right: 0;
		height: 100%;
		display: inline-block;

		>view:nth-child(1) {
			display: flex;
			font-size: 18upx;
			color: #fff;


			view {
				width: 30upx;
				height: 30upx;
				line-height: 30upx;
				border-radius: 4upx;
				text-align: center;
				margin-left: 20upx;
			}

			.pin {
				background: linear-gradient(to bottom right, rgb(254, 162, 120), rgb(253, 61, 93));

			}

			.kan {
				background: linear-gradient(to bottom right, rgb(254, 188, 128), rgb(254, 153, 47));
			}
		}
	}


	.img {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		.imgItem {
			flex: 0 0 32.5%;

			image {
				width: 100%;
				height: 200upx;
				border-radius: 12upx;
			}
		}

		.imgItem:nth-child(2) {
			margin: 0 1.25%;
		}

		.imgItem:nth-child(5) {
			margin: 0 1.25%;
		}

		.imgItem:nth-child(8) {
			margin: 0 1.25%;
		}

	}
</style>
